<template>
  <div id="app">
    <!-- 登录页面 - 全屏显示 -->
    <div v-if="$route.name === 'Login'" class="login-layout">
      <router-view />
    </div>
    
    <!-- 主界面布局 - 包含左侧菜单 -->
    <el-container v-else class="main-layout">
      <el-aside :width="isCollapse ? '64px' : '200px'" class="sidebar">
        <div class="sidebar-header">
          <div class="logo" v-if="!isCollapse">
            <span>内容管理系统</span>
          </div>
          <el-button
            class="collapse-btn"
            circle
            size="small"
            @click="toggleCollapse"
            style="margin-left: auto; width: 28px; height: 28px; padding: 0; border: none; background: rgba(255,255,255,0.1); color: #ecf0f1;"
          >
            <el-icon style="font-size: 14px;">
              <ArrowRight v-if="isCollapse" />
              <ArrowLeft v-else />
            </el-icon>
          </el-button>
        </div>
        <el-menu
          :default-active="$route.path"
          class="el-menu-vertical"
          :collapse="isCollapse"
          :collapse-transition="false"
          router
          background-color="#2c3e50"
          text-color="#fff"
          active-text-color="#ffd04b"
          :show-timeout="0"
          :hide-timeout="0"
          popper-class="custom-menu-tooltip"
        >
          <el-menu-item index="/monitor" title="监控中心">
            <el-icon><Monitor /></el-icon>
            <span>监控中心</span>
          </el-menu-item>
          <el-menu-item index="/streams" title="直播流管理">
            <el-icon><VideoCamera /></el-icon>
            <span>直播流管理</span>
          </el-menu-item>
          <el-menu-item index="/tasks" title="任务管理">
            <el-icon><List /></el-icon>
            <span>任务管理</span>
          </el-menu-item>
          <el-menu-item index="/recording-clipping" title="视频拆条">
            <el-icon><Scissor /></el-icon>
            <span>视频拆条</span>
          </el-menu-item>    
          <el-menu-item index="/storage" title="文件存储">
            <el-icon><Folder /></el-icon>
            <span>文件存储</span>
          </el-menu-item>     
          <el-menu-item index="/servers" title="集群管理">
            <el-icon><Monitor /></el-icon>
            <span>集群管理</span>
          </el-menu-item>
          <el-menu-item index="/users" title="人员管理">
            <el-icon><User /></el-icon>
            <span>人员管理</span>
          </el-menu-item>
        </el-menu>
        
      </el-aside>
      
      <el-container>
        <el-header class="header" height="40px">
          <div class="header-content">
            <div class="breadcrumb-container">
              <h2 class="page-title">{{ $route.meta.title || '直播管理系统' }}</h2>
            </div>
            
            <div class="user-menu">
              <el-dropdown style="margin-top: 8px;">
                <span class="user-info-dropdown">
                  <el-icon><UserFilled /></el-icon>
                  <span class="username">{{ username }}</span>
                  <el-icon><ArrowDown /></el-icon>
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="handleLogout">
                      <el-icon><SwitchButton /></el-icon>
                      退出登录
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </div>
        </el-header>
        
        <el-main class="main-content">
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import { ElMessage } from 'element-plus'
import { userApi } from '@/api/user'
import {
  Monitor,
  VideoCamera,
  List,
  Scissor,
  VideoPlay,
  User,
  UserFilled,
  SwitchButton,
  ArrowDown,
  Folder,
  ArrowLeft,
  ArrowRight
} from '@element-plus/icons-vue'

const router = useRouter()
const route = useRoute()
const authStore = useAuthStore()
const username = computed(() => authStore.username || '')
const userMenus = ref([])

// 获取用户菜单权限
const fetchUserMenus = async () => {
  try {
    const response = await userApi.getUserMenus()
    userMenus.value = response
  } catch (error) {
    console.error('获取用户菜单权限失败:', error)
    // 如果获取失败，显示所有菜单
    userMenus.value = allMenuItems.map(item => item.key)
  }
}

// 监听登录状态变化
const updateUserInfo = () => {
  if (authStore.isAuthenticated && authStore.username) {
    fetchUserMenus()
    console.log('当前登录用户UID:', authStore.uid)
  }
}

const handleLogout = () => {
  localStorage.removeItem('token')
  localStorage.removeItem('username')
  ElMessage.success('已退出登录')
  window.location.href = '/'
}

onMounted(() => {
  updateUserInfo()
})

// 监听authStore变化，确保登录后自动更新
watch(() => authStore.username, (newUsername) => {
  if (newUsername) {
    updateUserInfo()
  }
}, { immediate: true })

// 折叠状态
const isCollapse = ref(false)

// 切换折叠状态
const toggleCollapse = () => {
  isCollapse.value = !isCollapse.value
}

// 所有菜单项配置
const allMenuItems = [
  { key: 'monitor', title: '监控中心', icon: Monitor, path: '/monitor' },
  { key: 'streams', title: '流管理', icon: VideoCamera, path: '/streams' },
  { key: 'tasks', title: '任务管理', icon: List, path: '/tasks' },
  { key: 'clips', title: '剪辑管理', icon: Scissor, path: '/clip-tasks' },
  { key: 'records', title: '录制管理', icon: VideoPlay, path: '/recordings' },
  { key: 'servers', title: '服务器管理', icon: Monitor, path: '/servers' },
  { key: 'users', title: '人员管理', icon: User, path: '/users' },
  { key: 'storage', title: '存储管理', icon: Folder, path: '/storage' }
]

// 根据用户权限过滤的菜单项
const menuItems = computed(() => {
  if (!userMenus.value.length) return allMenuItems
  return allMenuItems.filter(item => userMenus.value.includes(item.key))
})
</script>

<style>
/* 全局重置，移除所有边距 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

#app {
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

/* 自定义菜单tooltip样式 */
:global(.custom-menu-tooltip) {
  background: rgba(44, 62, 80, 0.95) !important;
  border: none !important;
  border-radius: 4px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  color: #ffffff !important;
  font-weight: 500 !important;
  letter-spacing: 0.5px !important;
  line-height: 1.4 !important;
  transition: none !important;
}

:global(.custom-menu-tooltip .el-popper__arrow::before) {
  background: rgba(44, 62, 80, 0.95) !important;
  border: none !important;
}

:global(.el-menu--collapse .el-tooltip__trigger) {
  transition: none !important;
}
</style>

<style scoped>
/* 主布局 - 确保占满全屏 */
.main-layout {
  height: 100vh;
  width: 100vw;
  display: flex;
  margin: 0;
  padding: 0;
}

/* 侧边栏样式 */
.sidebar {
  background: #2c3e50;
  height: 100vh;
  transition: width 0.3s ease;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px;
  border-bottom: 1px solid #34495e;
  height: 60px;
  flex-shrink: 0;
  margin: 0;
}

.logo {
  color: white;
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
}

.collapse-btn {
  margin-left: auto;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: rgba(255,255,255,0.1);
  color: #ecf0f1;
  transition: all 0.3s ease;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.collapse-btn:hover {
  background: rgba(255,255,255,0.2);
  color: white;
  transform: scale(1.1);
}



/* 菜单样式 */
.el-menu-vertical {
  flex: 1;
  border-right: none;
  background-color: #2c3e50;
  overflow-y: auto;
  margin: 0;
  padding: 0;
}

.el-menu-vertical:not(.el-menu--collapse) {
  width: 200px;
}

:deep(.el-menu) {
  background-color: #2c3e50;
  border-right: none;
  margin: 0;
  padding: 0;
}

:deep(.el-menu-item) {
  color: #ecf0f1;
  margin: 0;
  padding: 0 20px;
}

:deep(.el-menu-item:hover) {
  background-color: #34495e;
  color: white;
}

:deep(.el-menu-item.is-active) {
  background-color: #34495e;
  color: #ffd04b;
}

/* 主容器 */
:deep(.el-container) {
  flex: 1;
  height: 100vh;
  margin: 0;
  padding: 0;
}

:deep(.el-header) {
  height: 40px;
  line-height: 40px;
  background: white;
  border-bottom: 1px solid #e4e7ed;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  margin: 0;
  padding: 0;
}

:deep(.el-main) {
  height: calc(100vh - 40px);
  background-color: #f5f5f5;
  margin: 0;
  padding: 0;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  height: 100%;
}

.page-title {
  color: #409eff;
  font-size: 14px;
  font-weight: 250;
  margin: 0;
}

.user-info-dropdown {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border-radius: 20px;
  cursor: pointer;
}

.user-info-dropdown:hover {
  background-color: #f5f5f5;
}

.username {
  font-size: 13px;
  color: #606266;
}
</style>
/* 登录页面布局 */
.login-layout {
  height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* 响应式设计 */
@media screen and (max-width: 768px) {
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 1000;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }
  
  .sidebar.show-mobile {
    transform: translateX(0);
  }
}
